<template>
  <view class="controller">
    <xy-title title="新闻资讯"></xy-title>
    <view class="safeTop"></view>
    <view class="cate-list">
      <view :class="navActive==index?'active':''" v-for="(item,index) in categoryList" :key="index" @click="tapNav(index,item)">
        {{item.name}}
      </view>
    </view>
    <view class="lists">
      <news-row v-for="(val,idx) in lists" :item="val"></news-row>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex';
import newsRow from "@/components/news/row.vue"
import xyEmpty from "@/components/xy-empty/index.vue";
import xyTitle from "@/components/xy-title/index.vue";

export default {
  components: {newsRow,xyEmpty,xyTitle},
  data() {
    return {
      id: '',
      lists: [],
      isEmpty: true,
      currentPage: 1,
      lastPage: 1,

      categoryList: [
        {
          id : '',
          name : '全部'
        }
      ],
      navActive: 0,
    };
  },
  computed: {
    ...mapState(['common'])
  },

  async onLoad(options) {
    if(options?.id){
      this.id = options.id;
    }
    this.loadData();
    this.onLoadCate();
  },
  onPullDownRefresh() {
    this.currentPage = 1;
    this.lists = [];
    this.loadData();
  },
  onReachBottom() {
    if(this.currentPage < this.lastPage) {
      this.currentPage += 1;
      this.loadData();
    }
  },
  methods: {
    async loadData() {
      this.$api.post({
        url: '/news/lists',
        loadingTip: '加载中...',
        data: {
          cate_id : this.categoryList[this.navActive].id,
          page: this.currentPage,
        },
        success: res => {
          uni.stopPullDownRefresh();
          this.lists = [...this.lists,...res.data];
          this.currentPage = res.current_page;
          this.lastPage = res.last_page;

        }
      })
    },
    onLoadCate() {
      var that = this;
      this.$api.get({
        url: '/common/categories',
        data: {type: 'news'},
        success: (data) => {
          this.categoryList = [...this.categoryList,...data];
        }
      })
    },

    tapNav(index, item) {
      this.navActive = index;
      this.currentPage = 1;
      this.lists = [];
      this.loadData();
    },
  }
}
</script>

<style>
page{

}
</style>
<style lang="scss">
.controller{

}
.cate-list{
  display: flex;
  flex-wrap: nowrap;
  overflow: scroll;
  background: #fff;
  padding: 0 50rpx;
  border-bottom: 20rpx solid #f2f3f5;
  &::-webkit-scrollbar {
    display: none;
  }
  view{
    line-height: 80rpx;
    font-size: 30rpx;
    height: 95rpx;
    white-space: nowrap;
    margin-right: 64rpx;
    position: relative;
    &:last-child{
      margin-right: 0;
    }
  }
  .active:after{
    background: $theme2;
    height: 8rpx;
    border-radius: 8rpx;
    width: 34rpx;
    display: block;
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 16rpx;
    margin: 0 auto;
  }
}
.lists{
  padding: 10rpx 30rpx;
  .item:last-child{
    border: none;
  }
}
</style>
